<!--  -->
<template>
  <div>
    <div class="headImg">
      <div class="headNav">
        <van-icon @click="back" name="arrow-left" />
        <span>电影评分</span>
        <van-icon @click="share" class="iconfont icon-fenxiang" />
        <van-share-sheet
          v-model="showShare"
          title="立即分享给好友"
          :options="options"
          @select="onSelect"
        />
      </div>
      <div class="title">
        <p>《大鱼海棠》</p>
        <div><van-icon name="star" v-for="i in 5" :key="i" />&nbsp;9.0分</div>
        <p class="rate">{{ raters / 10000 }}万人评分</p>
      </div>
      <div class="rate-data">
        <ul>
          <li v-for="(item, i) in rates" :key="i">
            <span>{{ ((item.total / raters) * 100).toFixed(1) }}%</span>
            <div></div>
            <span>{{ item.range }}</span>
          </li>
        </ul>
        <p>·以上数据，实时更新</p>
      </div>
      <div class="line"></div>
      <div class="rate-info">
        <div class="title">观众评分画像</div>
        <div class="vs">
          <div class="item">
            <img src="@/assets/images/rating/man.png" />
            <span>男性观众</span>
            <span class="score">8.4分</span>
          </div>
          <p>VS</p>
          <div class="item">
            <img src="@/assets/images/rating/woman.png" />
            <span>女性观众</span>
            <span class="score">8.6分</span>
          </div>
        </div>
        <ul>
          <li v-for="i in 4" :key="i">
            <span>95后</span>
            <div></div>
            <span>8.7分</span>
          </li>
        </ul>
        <p class="tip">·以上数据，每30分钟更新一次</p>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
      raters: 285000,
      rates: [
        {
          total: 145000,
          range: "9-10分",
        },
        {
          total: 82000,
          range: "8-9分",
        },
        {
          total: 51000,
          range: "7-8分",
        },
        {
          total: 15000,
          range: "6-7分",
        },
        {
          total: 5000,
          range: "5-6分",
        },
      ],
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    share() {
      this.showShare = true;
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.rates.map((item, i) => {
      document.querySelectorAll(".rate-data div")[i].style.height =
        item.total / 1000 + "px";
    });
  },
};
</script>
<style scoped lang="scss">
$scoreColor: #fbc34a;
.headImg {
  width: 100%;
  height: 498px;
  background: url(~@/assets/images/rating/bg.png) no-repeat center;
  background-size: cover;
  .title {
    text-align: center;
    margin-top: 93px;
    line-height: 55px;
    div {
      font-size: 44px;
      color: $scoreColor;
      .van-icon {
        font-size: 16px;
      }
    }
    p {
      margin: 0px;
      color: #fff;
      font-size: 36px;
    }
    .rate {
      opacity: 0.58;
      font-size: 24px;
      color: #ffffff;
    }
  }
}
.headNav {
  padding: 0 40px;
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  .van-icon {
    color: #fff;
    opacity: 0.78;
    font-size: 40px;
  }
  span {
    font-size: 32px;
    color: #fff;
  }
}

.van-nav-bar {
  color: #fff;
  background: transparent;
}

.rate-data {
  p {
    text-align: center;
    opacity: 0.34;
    font-size: 24px;
    color: #ffffff;
  }
  ul {
    padding: 0 100px;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end;
    li {
      span:first-child {
        color: $scoreColor;
      }
      span {
        opacity: 0.56;
        font-size: 24px;
        color: #ffffff;
      }
      div {
        width: 44px;
        background-image: linear-gradient(180deg, #f1a263 0%, #f25e84 100%);
        border-radius: 10px;
        height: 270px;
      }
    }
  }
}
.line {
  width: 100%;
  height: 12px;
  background: #33363d;
}
.rate-info {
  .tip {
    text-align: center;
    padding: 20px 0px;
    opacity: 0.34;
    font-size: 24px;
    color: #ffffff;
  }

  .title {
    margin-top: 40px;
    text-align: center;
    font-size: 32px;
    color: #fff;
  }
  .vs {
    display: flex;
    color: #fff;
    justify-content: space-around;
    padding: 40px 60px;
    p {
      margin: 18px 24px;
      font-size: 32px;
    }
    .item {
      width: 276px;
      height: 72px;
      line-height: 50px;
      background-color: #33363d;
      border-radius: 12px;
      text-align: center;
    }
    img {
      width: 40px;
      height: 40px;
      vertical-align: -8px;
    }
    span {
      margin-left: 10px;
      font-size: 26px;
      color: #ffffff;
    }
    .score {
      font-size: 24px;
      color: $scoreColor;
    }
  }
  ul {
    width: 500px;
    margin: 0 auto;
    li:first-child {
      margin-top: 40px;
    }
    li {
      display: flex;
      margin-top: 60px;
      div {
        margin: 0 20px;
        width: 270px;
        background-image: linear-gradient(180deg, #f1a263 0%, #f25e84 100%);
        border-radius: 10px;
        height: 24px;
      }
      span:last-child {
        color: $scoreColor;
      }
      span {
        opacity: 0.56;
        font-size: 28px;
        color: #ffffff;
      }
    }
  }
}
</style>
